<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>160_事件的补货</title>
		<style>
			#box1 {
				width: 300px;
				height: 300px;
				background-color: aqua;
			}

			#box2 {
				width: 200px;
				height: 200px;
				background-color: orange;
			}

			#box3 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>

		<script>
			/* 
			事件的捕获:
				-在DOM中，事件的传播可以分为三个阶段:
					1.捕获阶段(由祖先元素向目标元素进行事件的捕获)
					2.目标阶段(触发事件的对象)
					3.冒泡阶段(由目标元素向祖先元素进行事件的冒泡)
					
				-事件的捕获，指事件从外向内的传导，
					当前元素触发事件以后，会先从当前元素最大的祖先元素开始向当前元素开始进行事件的捕获
					
				-如果希望在捕获阶段触发事件，可以将addEventListener的第三个参数设置为true
					一般情况下我们不希望事件在捕获阶段触发，所有通常都不需要设置第三个参数
			 */
			const box1 = document.getElementById("box1");
			const btn2 = document.getElementById("box2");
			const btn3 = document.getElementById("box3");

			box1.addEventListener("click", event => {
				alert(event.eventPhase) //eventPhase表示事件触发的阶段,1 捕获阶段 2目标阶段 3冒泡阶段
			}, true)
			btn2.addEventListener("click", event => {
				alert(2)
			})
			btn3.addEventListener("click", event => {
				alert(3)
			})
		</script>
	</body>
</html>